﻿@model SearchBoxFrontModel
@using Nop.Web.Models.Catalog;

    @using (Html.BeginRouteForm("ProductSearch", FormMethod.Get, new { onsubmit = "return check_small_search_form()", id = "header-search-bar-form" }))
    {
            <div class="absolute-position-wrapper">   
                <div class="relative-position-wrapper">
                    <input type="text" class="search-box-text" id="search-text" @(Model.AutoCompleteEnabled ? Html.Raw(" autocomplete=\"off\"") : null)
                    value="@T("Search.SearchBox.Tooltip")" name="q"  onfocus="if(this.value=='@T("Search.SearchBox.Tooltip")')this.value=''" onblur="if(this.value=='') {this.value = '@T("Search.SearchBox.Tooltip")';}" />&nbsp;
                
                    @Html.DropDownListFor(model => model.Cid, Model.AvailableCategories, new {@id="search-category"})
                </div>
            </div>
            <input type="submit" class="button-1 search-box-button" value="@T("Search")" />

        <script type="text/javascript">

            function check_small_search_form() {
                var search_terms = $("#small-searchterms");
                if (search_terms.val() == "") {
                    alert('@T("Search.EnterSearchTerms")');
                    search_terms.focus();
                    return false;
                }

                return true;
            }
            @if (Model.AutoCompleteEnabled)
            {
                <text>
            $(function () {
                $('#search-text').autocomplete({
                    delay: 500,
                    minLength: @(Model.SearchTermMinimumLength.ToString()),
                        source: '@(Url.RouteUrl("ProductSearchAutoComplete"))',
                        select: function( event, ui ) {
                            $("#small-searchterms").val(ui.item.label);
                            setLocation(ui.item.producturl);
                            return false;
                        }
                    })
                    .data("autocomplete")._renderItem = function( ul, item ) {
                        var t = item.label;
                        //html encode
                        t = htmlEncode(t);
                        return $("<li></li>")
                        .data("item.autocomplete", item)
                        .append("<a>@(Model.ShowProductImagesInSearchAutoComplete ? Html.Raw("<img src='\" + item.productpictureurl + \"'>") : null )" + t + "</a>")
                    .appendTo(ul);
                    };
                });
                </text>
            }
        </script>
        @Html.Widget("searchbox")
    }
